<template>
  <div class="container">
    <div class="course-top">
      <my-search @search="handleSearch"></my-search>
      <div class="selectWrapper">
        <!-- <div class="select">
          类型筛选：
          <el-select v-model="value1" placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div> -->
        <div class="select">
          状态筛选：
          <el-select v-model="value2" placeholder="请选择" @change="isPutAwayChange">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              
            ></el-option>
          </el-select>
        </div>
      </div>
      <div class="tip">上架和下架</div>
      <el-button class="add" @click="handleAdd">添加</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="序号" width="80px">
          <template slot-scope="scope">{{calcuIndex(scope)}}</template>
        </el-table-column>
        <el-table-column width="130px" prop="book_name" label="书籍名称"></el-table-column>
        <el-table-column width="130px" label="书籍封面">
          <template slot-scope="scope">
            <img :src="scope.row.book_cover" alt class="bookcover" />
          </template>
        </el-table-column>
        <el-table-column width="150px" prop="read_age" label="适合年龄"></el-table-column>
        <el-table-column width="150px" prop="book_desc" label="描述"></el-table-column>
        <el-table-column width="150px" prop="updated_at" label="编辑时间"></el-table-column>
        <el-table-column width="150px" prop="sort" label="排序"></el-table-column>
        <el-table-column class="table-btn" label="操作">
          <template slot-scope="scope">
            <el-button class="editor" @click="handleEdit(scope)">编辑</el-button>
            <el-button class="sold-out" @click="isPutaway(scope)">{{scope.row.is_putaway == 2 ? '上架' : '下架'}}</el-button>
            <el-button class="delete" @click="deleteBook(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination
      @currentChange="currentChange"
      class="pagination"
      :pageSize="pageSize"
      :total="total"
      :currentPage="currentPage"
    ></Pagination>
  </div>
</template>
<script>
import MySearch from "@/common/input/index";
import { getBookList, isPutaway, deleteBook } from "@/api/operation";
import { ERR_OK } from "@/api/config";
import Pagination from "@/common/pagination/pagination";
import {Message} from 'element-ui'
export default {
  data() {
    return {
      options1: [
        {
          value: "1",
          label: "萌芽班"
        },
        {
          value: "2",
          label: "小草班"
        },
        {
          value: "3",
          label: "灌木班"
        },
        {
          value: "4",
          label: "大树班"
        }
      ],
      value1: "",
      options2: [
        {
          value: "1",
          label: "上架"
        },
        {
          value: "2",
          label: "下架"
        }
      ],
      value2: "",
      tableData: [],
      page: 1,
      pageSize: 15,
      total: 0,
      currentPage: 1,
      is_putaway: undefined,
      keyword: ''
    };
  },
  computed: {},
  methods: {
    handleSearch(keyword) {
      this.currentPage = 1
      this.page = 1
      this.keyword = keyword
      this._getBookList(this.page, this.is_putaway, this.keyword)
    },
    isPutAwayChange(val) {
      console.log(val)
      this.is_putaway = val
      this.page = 1
      this._getBookList(this.page, this.is_putaway, this.keyword)
    },
    isPutaway(scope) {
      this.currentPage = 1
      console.log(scope)
      let my_type = scope.row.is_putaway == 2 ? 3 : 2
      this._isPutaway(scope.row.book_id, my_type)
      this.changeIsputAway(scope.row.book_id)

    },
    changeIsputAway(book_id) {
      let index = this.tableData.findIndex((item) => {
        return item.book_id === book_id
      })
      if (index >= 0) {
        this.tableData[index].is_putaway = this.tableData[index].is_putaway == 2 ? 3 : 2
      }
    },
    deleteBook(scope) {
      this._deleteBook(scope.row.book_id)
      this.deleteTableData(scope.row.book_id, 'book_id')
      this.total -= 1
    },
    deleteTableData(param, name) {
      let index = this.tableData.findIndex((item) => {
        return item[name] === param
      })
      if (index >= 0) {
        this.tableData.splice(index, 1)
      }
    },
    calcuIndex(scope) {
      return scope.$index + 1 + this.pageSize * (this.page - 1);
    },
    currentChange(val) {
      this.page = val;
      this._getBookList(this.page, this.is_putaway, this.keyword);
      // console.log(val);
    },
    handleAdd() {
      this.$router.push({ path: "/read/readRecommend/add" });
    },
    handleEdit(scope) {
      this.$router.push({ path: `/read/readRecommend/edit/${scope.row.book_id}`});
      // console.log(scope.row)
      localStorage.setItem('EDIT_BOOK_INFO', JSON.stringify(scope.row))
    },
    _deleteBook(book_id) {
      deleteBook(book_id)
        .then((res) => {
          if (res.code == ERR_OK) {
            Message({
              message: res.message,
              type: 'info'
            })
            // console.log(res)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    _isPutaway(book_id, my_type, sort) {
      isPutaway(book_id, my_type, sort)
        .then((res) => {
          if (res.code == ERR_OK) {
            // console.log(res)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    _getBookList(page, is_putaway, keyword) {
      getBookList(page, is_putaway, keyword)
        .then(res => {
          if (res.code == ERR_OK) {
            // console.log(res);
            let ret = res.data.list;
            this.total = ret.total;
            let arrList = ret.data;
            this.tableData = arrList;
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  created() {
    this._getBookList(this.page);
  },
  components: {
    MySearch,
    Pagination
  }
};
</script>
<style lang="scss" scoped>
@import "@/common/scss/index.scss";
.container {
  padding: 20px;
  padding-top: 50px;
  margin-bottom: 30px;
}
.course-top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.tip {
  width: 100px;
  height: 40px;
  line-height: 20px;
  background-color: rgba(174, 18, 23, 1);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0);
  color: #fff;
  line-height: 40px;
  font-size: 14px;
  left: 999px;
  font-family: Roboto;
}
.editor {
  width: 70px;
  height: 34px;
  line-height: 20px;
  border-radius: 6px;
  background-color: rgba(27, 166, 135, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
  color: #fff;
}
.sold-out {
  width: 70px;
  height: 34px;
  line-height: 20px;
  border-radius: 6px;
  background-color: #ddd;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
  color: #444;
}
.delete {
  width: 70px;
  height: 34px;
  line-height: 20px;
  border-radius: 6px;
  background-color: #ddd;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
  color: #444;
}
.table /deep/ .has-gutter {
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
}
.table {
  margin-bottom: 30px;
}
.selectWrapper {
  display: flex;
  .select {
    margin-right: 20px;
  }
}
.add {
  width: 70px;
  height: 34px;
  line-height: 20px;
  border-radius: 6px;
  background-color: rgba(27, 166, 135, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  font-family: Roboto;
  color: #fff;
  position: absolute;
  right: 20px;
}
.input-wrapper {
  padding-left: 0;
}
.free-class {
  display: block;
  margin-top: 10px;
}
.bookcover {
  display: inline-block;
  width: 58px;
  height: 71px;
}
.pagination {
  @include hCenter();
  background: #fff;
  z-index: 99;
}
</style>
